<template>
   <div class="rightBtn">
		<!-- <div @click="getXYZ">按钮</div> -->
		  <!-- tab切换 -->
		<div class="tabbtn">
           <div v-for="(item,index) in yearData" :key="index" :class="curent == index ? 'active': 'tabbtnItem'" @click="switchtab(item,index)">
            {{item.year}}
        </div>
       </div>
	   <div class="leftbtn" v-show="show2020Data">
		   <div class="per-img" v-for="(item, i) in imgs" :title="item.name" :key="i" @click="clickBtn(i,item)" :style="{ 'background-image': item.isActive ? 'url(/images/yjjy/' + item.activeurl + ')' : 'url(/images/yjjy/' + item.url + ')' }">
			<span>
				{{item.name}}
			</span>
			</div>
	   </div>
	   <div class="rightbtn" v-show="show2021Data">
		   <div class="per-img" v-for="(item, i) in imgsright" :title="item.name" :key="i" @click="clickBtnright(i,item)" :style="{ 'background-image': item.isActive ? 'url(/images/yjjy/' + item.activeurl + ')' : 'url(/images/yjjy/' + item.url + ')' }">
			<span>
				{{item.name}}
			</span>
			</div>
	   </div>
		<div class="tree-con_left" >
			<Tree :msg="dangerSourceArr" v-show="showtree" @treedata="inittreeData" refs="roleTree"></Tree>
		</div>
		<div class="treeinfo" id="treeinfo">
			<div class="treeinfo-top">
			   <span class="treeinfo-title">{{infoTitle}}</span>
			   <i class="el-icon-close close" @click="closeInfo"></i>
			</div>
			<div class="treeinfo-con">
				<div class="treeinfo-contitle">基本信息</div>
				<div class="treeinfo-content" >
					<div class="treeinfo-inner" v-for="(key,index) of Object.keys(inconInfo)" :key="index">
						<span>{{ key + '：' }}</span>
						<span>{{ inconInfo[key] }}</span>
					</div>
				</div>
			</div>	
		</div>
	</div>
</template>

<script>
import Tree from '../../common/tree.vue'
import axios from "axios";
import doc from "../naturalData";
import fxf from '../fxff'
// import axios from "axios";
import { get } from "../../../util/request";
export default {
    data(){
        return{
		yearData:[
        { year:2020},
        {year:2021}],
          curBtn: -1,
		  showtree:false,
		  dangerSourceArr:[],
		  infoTitle:'',
		  inconInfo:{},
          screenWidth:1920,
		  model:[],
		  oldmodel:null,
		  curent:0,
		  show2020Data:true,
		  show2021Data:false,
		imgsright: [
			  {
					url: '防汛防风.png',
					activeurl: '防汛防风-active.png',
					name: '防汛防风',
					isActive: false,
				},
		  ],
          imgs: [
			  {
					url: '防护目标.png',
					activeurl: '防护目标-active.png',
					name: '防护目标',
					isActive: false,
				},
				{
					url: '风险隐患.png',
					activeurl: '风险隐患-active.png',
					name: '风险隐患',
					isActive: false,
				},
				{
					url: '应急资源.png',
					activeurl: '应急资源-active.png',
					name: '应急资源',
					isActive: false,
				},
				{
					url: '政务基底.png',
					activeurl: '政务基底-active.png',
					name: '政务基底',
					isActive: false,
				},
		  ],
    }
    },
    methods:{
		switchtab(item,index){
           this.curent = index
		   if(item.year == 2020){
			   this.show2020Data = true
			   this.show2021Data = false
		   }else if(item.year == 2021){
			   this.show2020Data = false
			   this.show2021Data = true
		   }
		},
		addBoundInfoBox(positionValue, elementId){
            const oneDiv = window.document.getElementById(elementId);
            oneDiv.style.display = "block";
            let that = this
            let preRenderListener = viewer.scene.postRender.addEventListener(()=>{
                  let elWidth = oneDiv.offsetWidth;
                  let elHeight = oneDiv.offsetHeight;
                  if(that.screenWidth  === 1920){
                    elWidth = oneDiv.offsetWidth
                    elHeight = oneDiv.offsetHeight
                  }else if(that.screenWidth  === 3840){
                    elWidth = oneDiv.offsetWidth -1920;
                    elHeight = oneDiv.offsetHeight
                  }
                    const scratch = new Cesium.Cartesian2(); //cesium二维笛卡尔 笛卡尔二维坐标系就是我们熟知的而二维坐标系；三维也如此
                    let position = positionValue;
                    var cartographicPosition = Cesium.Ellipsoid.WGS84.cartesianToCartographic(position); //笛卡尔转84
                    var lat=Cesium.Math.toDegrees(cartographicPosition.latitude);
                    var lng=Cesium.Math.toDegrees(cartographicPosition.longitude);
                    var alt=cartographicPosition.height;
                    var positions = [
                            Cesium.Cartographic.fromDegrees(lng,lat)
                    ];
                    var carto=new Cesium.Cartographic.fromDegrees(lng,lat)　　//输入经纬度
                    // var h2=viewer.scene.sampleHeight(carto);
					var position1 = Cesium.Cartesian3.fromDegrees(lng, lat);
					const canvasPosition =
						viewer.scene.cartesianToCanvasCoordinates(
							position1,
							scratch
						); //cartesianToCanvasCoordinates 笛卡尔坐标（3维度）到画布坐标
					if (Cesium.defined(canvasPosition)) {
						// 根据元素宽高及当前点屏幕坐标进行偏移
						oneDiv.style.top =
							canvasPosition.y - elHeight * 1.1 + "px";
						oneDiv.style.left =
							canvasPosition.x - elWidth / 2 + "px";
					}
					return;
					// var promise = viewer.scene.sampleHeightMostDetailed(positions);
					// promise.then((updatedPosition)=>{
					// 	// console.log(updatedPosition[0].updatedPosition)
					// 	var position1 = Cesium.Cartesian3.fromDegrees(lng, lat,updatedPosition[0].updatedPosition);//加入高度之后，不会飘，但是不能解决地球缩放问题
					// // console.log(h2)
					// })

                    // var promise = Cesium.sampleTerrainMostDetailed(window.dx, positions);//(地形数据，positions)
            })
		 },
		iconClick(){
		 let baseurl = window.loginUrl;
         var handlerVideo = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
	     let that = this
		  handlerVideo.setInputAction((movement) => {
		  that.infoTitle = viewer._selectedEntity._dataType
		  if(viewer._selectedEntity && viewer._selectedEntity._type =="资源树"){
			// if(that.oldmodel !== null){
			//   that.oldmodel._billboard._image._value = `/data/images/icon/${that.oldmodel._dataType}.png`
			// } 
			// viewer._selectedEntity._billboard._image._value = `/data/images/icon/${viewer._selectedEntity._dataType}active.png`
			// that.oldmodel = viewer._selectedEntity;
			var cartographicPosition = Cesium.Ellipsoid.WGS84.cartesianToCartographic(viewer._selectedEntity._position._value); //笛卡尔转84
            var lat=Cesium.Math.toDegrees(cartographicPosition.latitude);
            var lng=Cesium.Math.toDegrees(cartographicPosition.longitude);
            let option = {
                destination: Cesium.Cartesian3.fromDegrees(
                    parseFloat(lng), 
                    parseFloat(lat),
                    400000
                ),
                duration:1.5
            }
            viewer.camera.flyTo(option);
			  option.complete = ()=>{
				  if (viewer._selectedEntity && viewer._selectedEntity._data.id) {
				axios({
			     	url: `${baseurl}${viewer._selectedEntity._dataUrl}`,
			     	method: 'get',
                params:{
                kbId:viewer._selectedEntity._datakbId,
                dataId:viewer._selectedEntity._data.id
                }
			     }).then((res) => {
              if(res.status == 200){
                 let vData = res.data.data
                 let dic = doc[viewer._selectedEntity._dataType];
				       that.inconInfo={}
                 for(let key in dic){
                    that.inconInfo[dic[key]] = vData[key];
                }
                that.addBoundInfoBox(viewer._selectedEntity._position._value,"treeinfo")
            }
			})
			}
			}
		  }else if(viewer._selectedEntity && viewer._selectedEntity._type =="防汛防风"){
			  console.log(viewer._selectedEntity)
			  	if(that.oldmodel !== null){
			  that.oldmodel._billboard._image._value = `/data/images/icon/${that.oldmodel._dataType}.png`
			} 
			viewer._selectedEntity._billboard._image._value = `/data/images/icon/${viewer._selectedEntity._dataType}active.png`
			that.oldmodel = viewer._selectedEntity;
			var cartographicPosition = Cesium.Ellipsoid.WGS84.cartesianToCartographic(viewer._selectedEntity._position._value); //笛卡尔转84
            var lat=Cesium.Math.toDegrees(cartographicPosition.latitude);
            var lng=Cesium.Math.toDegrees(cartographicPosition.longitude);
            let option = {
                destination: Cesium.Cartesian3.fromDegrees(
                    parseFloat(lng), 
                    parseFloat(lat),
                    400000
                ),
                duration:1.5
            }
            viewer.camera.flyTo(option);
			  option.complete = ()=>{
				  if (viewer._selectedEntity && viewer._selectedEntity._data.id) {
				axios({
			     	url: `${baseurl}${viewer._selectedEntity._dataUrl}`,
			     	method: 'get',
                params:{
                id:viewer._selectedEntity._data.id
                }
			     }).then((res) => {
              if(res.status == 200){
				//   console.log(res.data.data)
                 let vData = res.data.data.baseInfo
                 let dic = fxf[viewer._selectedEntity._dataType];
				that.inconInfo={}
                 for(let key in dic){
                    that.inconInfo[dic[key]] = vData[key];
                }
                that.addBoundInfoBox(viewer._selectedEntity._position._value,"treeinfo")
            }
			})
			}
			}
		  }
		}, Cesium.ScreenSpaceEventType.LEFT_CLICK)
		},
        clickBtn(index,item){
			layerManager.removeAll();
			this.resetBefore()
           this.curBtn = index
			for (let i = 0; i < this.imgs.length; i++) {
				if (i != index) {
					this.imgs[i].isActive = false
				} else {
					this.imgs[index].isActive = !this.imgs[index].isActive
				}
			}
			this.showText = this.imgs[index].isActive
			if(this.imgs[0].isActive === false || this.imgs[1].isActive === false || this.imgs[2].isActive === false || this.imgs[3].isActive === false){
				var tree  = window.document.getElementById("tree");
			      if(tree){
				    tree.style.display ="none"
					   this.imgs[0].isActive === true
					   this.imgs[1].isActive === true
					   this.imgs[2].isActive === true
                       this.imgs[3].isActive === true
			      }
			}
			if(this.imgs[0].isActive === true || this.imgs[1].isActive === true || this.imgs[2].isActive === true || this.imgs[3].isActive === true){
				var tree  = window.document.getElementById("tree");
			      if(tree){
				       tree.style.display ="block"
					    this.imgs[0].isActive === true
                        this.imgs[1].isActive === true
                        this.imgs[2].isActive === true
                        this.imgs[3].isActive === true
			      }
			}
			switch (item.name) {
				// 危险源和隐患区
				case "风险隐患": { 
		            this.initProtectiontarget()
					break
				}
				// 防护目标
				case "防护目标": { 
					this.initDangerSource()
					break
				}
				// 应急保障资源
				case "应急资源": { 
					this.initEmergencySupport()
					break
				}
				//海南政务地理空间信息大数据平台
				case "政务基底": { 
					this.initInformation()
					break
				}
			}

        },
		clickBtnright(index,item){
		   layerManager.removeAll();
		   this.resetBefore()
           this.curBtn = index
			for (let i = 0; i < this.imgsright.length; i++) {
				if (i != index) {
					this.imgsright[i].isActive = false
				} else {
					this.imgsright[index].isActive = !this.imgsright[index].isActive
				}
			}
			if(this.imgsright[0].isActive === false){
				var tree  = window.document.getElementById("tree");
				if(tree){
					tree.style.display ="none"
					this.imgs[0].isActive === true
				}
			}
			if(this.imgsright[0].isActive === true){
				var tree  = window.document.getElementById("tree");
				if(tree){
					tree.style.display ="block"
					this.imgs[0].isActive === true
				}
			}
			this.showText = this.imgsright[index].isActive
			switch (item.name) {
				case "防汛防风": { 
		            this.initFloodWind()
					break
				}
			}
		},
		resetBefore(){
			switch (this.curBtn) {
				case 0: { 
					this.showtree = false
					break
				}
			}
		},
		// 危险源和隐患区
		initDangerSource(){
      // console.log(234)
			let baseurl = window.loginUrl;
			let that = this
            axios({
			     	url: `${baseurl}/api/tree/getRootTree`,
			     	method: 'get',
                    params:{
                       ids:"43"
                    }
			     }).then((res) => {
                     if(res.status == 200){
						 that.dangerSourceArr = res.data
                }
		    })
		},
		// 防护目标
		initProtectiontarget(){
			// this.showtree = true
			let baseurl = window.loginUrl;
			let that = this
            axios({
			     	url: `${baseurl}/api/tree/getRootTree`,
			     	method: 'get',
                    params:{
                       ids:"10"
                    }
			     }).then((res) => {
                     if(res.status == 200){
						 that.dangerSourceArr = res.data
                }
		    })
		},
		// 应急保障资源
		initEmergencySupport(){
			let baseurl = window.loginUrl;
			let that = this
            axios({
			     	url: `${baseurl}/api/tree/getRootTree`,
			     	method: 'get',
            params:{
                ids:"78"
            }
			     }).then((res) => {
            if(res.status == 200){
						 that.dangerSourceArr = res.data
            }
		    })
		},
		// 海南政务地理空间信息大数据平台
		initInformation(){
			let baseurl = window.loginUrl;
			let that = this
            axios({
			     	url: `${baseurl}/api/tree/getCeHuiTree`,
			     	method: 'get',
                    params:{
                       ids:"1"
                    }
			     }).then((res) => {
             if(res.status == 200){
						 that.dangerSourceArr = res.data
            }
		    })
      // this.dangerSourceArr =  this.cehuiData
		},
		// 防汛防风
		initFloodWind(){
			this.showtree = true
			let baseurl = window.loginUrl;
			let that = this
            axios({
			     	url: `${baseurl}/api/tree/getRootTree`,
			     	method: 'get',
                    params:{
                       ids:"146"
                    }
			     }).then((res) => {
				 if(res.status == 200){
				let arr =[]
				for(let obj in res.data){
					if(obj>=0 && obj <=8){
					arr.push(res.data[obj])
					}
				}
				 that.dangerSourceArr =arr
            }
		    })
		},
		closeInfo(){
			var treeinfo  = window.document.getElementById("treeinfo");
			if(treeinfo){
				viewer._selectedEntity._billboard._image._value = `/data/images/icon/${this.oldmodel._dataType}.png`
				this.oldmodel = null
				treeinfo.style.display ="none"
			}
		},
		inittreeData(data,checked){
		let baseurl = window.loginUrl;
        if(data.type =="data"){
         if(checked){
		    layerManager.fly(
                    109.81718500012782,
                    19.345261718452747,
                    474882,
                    6.237318703147128,
                    -1.5704875459600833,
                    0
                );
              let sourceArr =["水库","地质灾害隐患点","漫水桥(路)","危房","旅游景区景点","易淹易涝点(区)","渔船","渔港","塔吊"]
			  let that = this
              get(`${baseurl}${data.kbApiAll}`).then((res=>{
				if(sourceArr.includes(data.label)){
					that.dataToviewer(res.data,`/data/images/icon/${data.label}.png`,data.label,data.kbId,data.kbApiDetail,"防汛防风")
				}else{
					console.log(res.data)
					that.dataToviewer(res.data,`/data/images/icon/${data.label}.png`,data.label,data.kbId,data.kbApiDetail,"资源树")
				}
                }))
          }else {
           	var treeinfo  = window.document.getElementById("treeinfo");
			      if(treeinfo){
				       treeinfo.style.display ="none"
			      }
            for(var i = 0;i<this.model.length;i++){
              if(this.model[i]._dataType && this.model[i]._dataType == data.label){
                 viewer.entities.remove(this.model[i])
              }
            }
          }
        }else if(data.type=="cehui"){
           if(checked){
             let that = this
            //  console.log(data)
            get(`${baseurl}/api/tree/getCeHuiTreeById?id=${data.chId}`).then((res=>{
            //   console.log(res)
			    that.addLayerImage(res.chWmts,res.url,res.label)
            // if(res.code == 200){
            //       this.addLayerImage(data.chWmts,data.url,data.label)
            //     }
            }))
            }else {
              this.removeLayerByName(data.label)
            }
        }
		},
    addLayerImage(wmtsUrl,layername,label) {
	// console.log(placeNameService)
     this.layers = viewer.imageryLayers.addImageryProvider(
        // url+?service=WMTS&request=GetCapabilities 配置项
        new Cesium.UrlTemplateImageryProvider({
            //`${url}?layer=${layer}&style=default&tilematrixset=default028mm&Service=WMTS&Request=GetTile&Version=1.0.0&Format={format}&TileMatrix={TileMatrix}&TileRow={y}&TileCol={x}`
            url: `${wmtsUrl}?layer=RIVER_L&style=460203&tilematrixset=default028mm&Service=WMTS&Request=GetTile&Version=1.0.0&Format={format}&TileMatrix={TileMatrix}&TileRow={y}&TileCol={x}`,
            layer: layername,
            style: "default",
            format: "image/png",
            tileMatrixSetID: "default028mm",
            tilingScheme: new Cesium.GeographicTilingScheme(),
            //动态计算level
            customTags: {
                TileMatrix: function (imageryProvider, x, y, level) {
                    return level + 1;
                },
                // TileRow:function(y){
                //    return y+3000;
                // }
            },
        }));
        this.layers.name = label
         return  this.layers
    },
    removeLayerByName(name) {
     for(var i =0;i<viewer.imageryLayers._layers.length;i++){
        if(name == viewer.imageryLayers._layers[i].name){
            viewer.imageryLayers.remove(viewer.imageryLayers._layers[i])
        }
    }
    },
	dataToviewer(data, img,type,kbId,kbApiDetail,datatypes) {
        for (var i = 0; i < data.length; i++) {
          if(data[i].sfkx == null || data[i].sfkx == "是"){
          this.entity = viewer.entities.add({
					ID: data.ID,
					cursor: true,
					data: data[i],
					dataimage:img,
                    datakbId:kbId,
					dataType:type,
                    dataUrl:kbApiDetail,
                    type:datatypes,
                    dataPosition:[data[i].lng,data[i].lat],
					position: Cesium.Cartesian3.fromDegrees(data[i].lng, parseFloat(data[i].lat)),
					billboard: {
						image: img,
						verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
						horizontalOrigin: Cesium.HorizontalOrigin.CENTER, //
						width: 20,
						height: 25,
						heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
                        scaleByDistance:new Cesium.NearFarScalar(1.5e2, 1.5, 8.0e6, 0.0)
					},
				})
        }
         this.model.push(this.entity)
        }
	},
    },
	  mounted(){
      this.screenWidth = document.body.clientWidth
      this.iconClick()
	  },
	  components:{
		Tree
	  }
}
</script>
<style scoped lang="stylus">
/deep/ ::-webkit-scrollbar {
  /* 滚动条整体样式 */
  width: 4px;
  /* 高宽分别对应横竖滚动条的尺寸 */
  height: 0;
}

/deep/ ::-webkit-scrollbar-thumb {
  /* 滚动条里面小方块 */
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #2fd5ff;
  scrollbar-arrow-color: red;
}

/deep/ ::-webkit-scrollbar-track {
  /* 滚动条里面轨道 */
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}
</style>
<style lang="stylus" scoped>
@media (max-width: 2880px) {
.rightBtn {
	.leftbtn{
	.per-img {
	 width: vw(180);
	 height: 40px;
	 background-size: 100% 100%;
	 margin-bottom: vh(20);
	 cursor: pointer;
	margin-right:vw(10);
     // background: url(/images/yjjy/info-bg.png) no-repeat;
     // background:pink
	span{
		   width: vw(140);
		   height: 40px;
		   line-height :40px;
		   display:block;
		  padding-left:vw(37);
		//    text-align:center;
		   margin-left:vw(20)
	}
	     }
	}
	.rightbtn{
		.per-img {
	 width: vw(180);
	 height: 40px;
	 background-size: 100% 100%;
	 margin-bottom: vh(20);
	 cursor: pointer;
	margin-right:vw(10);
     // background: url(/images/yjjy/info-bg.png) no-repeat;
     // background:pink
	span{
		   width: vw(140);
		   height: 40px;
		   line-height :40px;
		   display:block;
		   padding-left:vw(37);
		//    text-align:center;
		   margin-left:vw(20)
	}
	     }
	}
	 .tabbtn{
          width:vw(180);
          height:vh(45);
          background:rgb(48, 163, 196);
          position:fixed;
          cursor:pointer;
          top:vh(100);
          right:30px;
		  border:1px solid rgb(17, 81, 120);
        //   border-top: 1px solid rgb(17, 81, 120);
        //   border-left: 1px solid rgb(17, 81, 120);
        //   border-bottom: 1px solid rgb(17, 81, 120);
          display:flex;
          .tabbtnItem{
            width:vw(60);
            height:vh(45); 
            line-height:vh(45);
            // background:#022d40;
            flex:1;
            text-align:center
            // border-right:1px solid #0a4d6a;
          }
         .active{
            width:vw(90);
            height:vh(43); 
            line-height:vh(43);
            cursor: pointer;
            text-align:center;
			border-bottom: 2px solid #ffffff;
            // background: #1398CF;
        }
      }
	.tree-con_left{
    width: vw(260);
    height:vh(600);
    position: absolute;
    top:0px;
    right: vw(200);
	// background:pink;
    // background:rgba(20, 42, 73,0.7) 
  }
	.treeinfo{
		width:vw(806);
		height:vh(400);
		background:rgba(3, 28, 35,0.8);
		display :none;
		position:fixed;
		z-index :999
		.treeinfo-top{
			width:100%;
			height:vh(50);
			background:#0b8fab;
			line-height :vh(50);
			padding-left:vw(25);
			box-sizing :border-box;
			.treeinfo-title{
			  font-size:16px;
		    }
			.close{
				float:right;
				font-size:20px;
				height:vh(50);
				line-height :vh(50);
				padding-right:vw(25);
				cursor:pointer;
			}
		}
		.treeinfo-con{
			width:100%;
			height:vh(300);
			padding:vh(20) vw(20);
			box-sizing :border-box;
			.treeinfo-contitle{
				width:100%;
				height:vh(30);
				line-height:vh(10);
				color:#00eaff;
				border-bottom 1px solid #eeeeee;
			}
			.treeinfo-content{
				width:100%;
			    height:vh(280);
				padding-top:vh(20);
				padding-bottom:vh(20);
				box-sizing :border-box;
				overflow-y:auto;
				.treeinfo-inner{
					width:vw(370);
					// height vh(20);
					line-height :vh(27);
					float:left;
					display:flex;
					justify-content:space-around;
					span:nth-child(1){
						// width:vw(130);
						display:block;
						text-align:right;
						// float :left
						color:#9fabb9;
						font-size:12px;
						font-weight: 600;
						flex:1;
					}
					span:nth-child(2){
						// width:vw(140);
						display:block;
						text-align:left;
						font-size:12px;
						flex:1;
						// float :left
					}
				}
			}
		}
		
	}
}
}
</style>
<style lang="stylus" scoped>
@media (min-width: 3000px) {
.rightBtn {
	.per-img {
		width: vw1(40);
		height: 40px;
		background-size: 100% 100%;
		margin-bottom: vh(20);
		cursor: pointer;
	}
  .tree-content{
    width: vw1(230);
    height:vh(600);
    position: absolute;
    top: vh(0);
    right: vw1(0);
    // background:rgba(20, 42, 73,0.7) 
  }
	.treeinfo{
		width:vw1(806);
		height:vh(400);
		background:rgba(3, 28, 35,0.8);
		display :none;
		position:fixed;
		z-index :999
		.treeinfo-top{
			width:100%;
			height:vh(50);
			background:#0b8fab;
			line-height :vh(50);
			padding-left:vw1(25);
			box-sizing :border-box;
			.treeinfo-title{
			  font-size:16px;
		    }
			.close{
				float:right;
				font-size:20px;
				height:vh(50);
				line-height :vh(50);
				padding-right:vw1(25);
				cursor:pointer;
			}
		}
		.treeinfo-con{
			width:100%;
			height:vh(300);
			padding:vh(20) vw1(30);
			box-sizing :border-box;
			.treeinfo-contitle{
				width:100%;
				height:vh(30);
				line-height:vh(10);
				color:#00eaff;
				border-bottom 1px solid #eeeeee;
			}
			.treeinfo-content{
				width:100%;
			    // height:vh(280);
				padding-top:vh(20);
				padding-bottom:vh(20);
				box-sizing :border-box;
				overflow-y:auto;
				.treeinfo-inner{
					width:vw1(370);
					// height vh(20);
					line-height :vh(27);
					float:left;
					display:flex;
					justify-content:space-around;
					span:nth-child(1){
						// width:vw(130);
						display:block;
						text-align:right;
						// float :left
						color:#9fabb9;
						font-size:12px;
						font-weight: 600;
						flex:1;
					}
					span:nth-child(2){
						// width:vw(140);
						display:block;
						text-align:left;
						font-size:12px;
						flex:1;
						// float :left
					}
				}
			}
		}
		
	}
}
}
</style>